<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn :slot-click="true" @click="jumpBackBefore"></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_personal.anonymousReporting }}</view>
				<view class="flex-center" @click="submitReport">{{ lang_common.submit }}</view>
			</view>
			
			<u-gap height="1" bgColor="rgba(0,0,0,0.07)"></u-gap>
		</view>
		
		<!-- 举报类型 -->
		<view style="padding: 0 30rpx;">
			<view class="u-m-t-32 u-f-30 u-lh-42" style="color: #7A7B7C;">{{ lang_personal.reportTypeTips }}</view>
			<view class="u-m-t-10">
				<u-row>
					<u-col
					v-for="(item, index) in reports"
					:key="index"
					:span="4">
						<view class="u-m-t-18" @click="changeReport(item)">
							<x-common-btn
							width="220"
							height="75"
							:color="hasReport(item) ? '#FFFFFF' : ''"
							:background="hasReport(item) ? 'linear-gradient(to right, #F94404 0%, #FD164F 100%)' : '#FFFFFF'"
							:borderColor="hasReport(item) ? 'rgba(0,0,0,0)' : '#E5E5E5'"
							borderWidth="2"
							>
								{{ lang_personal[item.key] }}
							</x-common-btn>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
	
		<!-- 图片证明 -->
		<view class="u-m-t-98" style="padding: 0 30rpx;">
			<view class="u-f-34 u-lh-48 font-medio">{{ lang_personal.reportImage }}</view>
			<view class="u-f-30 u-lh-42" style="color: #7A7B7C;">{{ lang_personal.reportImageTips }}</view>
			<view class="u-m-t-28">
				<x-upload @change="changeFile" @fail="settingValue = 'camera'"></x-upload>
			</view>
		</view>
		
		<!-- 补充描述 -->
		<view class="u-m-t-90" style="padding: 0 30rpx;">
			<view class="u-f-34 u-lh-48 font-medio">{{ lang_personal.otherDescription }}({{ lang_common.optional }})</view>
			<view class="u-m-t-28 description-container">
				<textarea
				 v-model="form.description"
				 resize="none"
				 :rows="7"
				 maxlength="200"
				 :placeholder="lang_personal.otherDescriptionTips"
				 style="width: 100%"
				 />
			</view>
		</view>
		
		<!-- 询问退出弹窗 -->
		<!-- 简介弹窗 -->
		<u-modal
		v-model="quitVisible"
		:show-title="false"
		:content="lang_common.notSaveTips"
		show-cancel-button
		:cancel-text="lang_common.cancel"
		:confirm-text="lang_common.done"
		:confirm-color="'#FD1E43'"
		@confirm="quitAction"
		z-index="9999999"
		>
		</u-modal>
		
		<!-- 留空 -->
		<view style="height: 200rpx;"></view>
		
		<permission-unAuthTips v-model="settingValue"></permission-unAuthTips>
	</view>
</template>

<script>
	import { actionReport } from '@/api/action.js'
	export default {
		data() {
			let reports = [
				{ key: 'report_reactionaryPolitics', value: 1, label: '反动政治' },
				{ key: 'report_pornographicVulgarity', value: 2, label: '色情低俗' },
				{ key: 'report_suspectedFraud', value: 3, label: '涉嫌诈骗' },
				{ key: 'report_advertisingDrainage', value: 4, label: '广告引流' },
				{ key: 'report_harassmentAbuse', value: 5, label: '骚扰谩骂' },
				{ key: 'report_bloodyViolence', value: 6, label: '血腥暴力' },
				{ key: 'report_illegalActivities', value: 7, label: '违法行为' },
				{ key: 'report_underAge' ,value: 8, label: '未成年' },
				{ key: 'report_otherContents', value: 9, label: '其他内容' }]
			return {
				reports,

				quitVisible: false,

				form: {
					reportIds: [],
					filelist: [],
					description: ''
				},
				
				userId: '',
				
				isClick: false,
				
				settingValue: ''
			}
		},
		onLoad({ userId }) {
			this.userId = userId
		},
		methods: {
			// 选择举报类型
			changeReport(item) {
				let reportIds = this.form.reportIds
				if (reportIds.includes(item.value)) {
					this.form.reportIds = reportIds.filter(value => item.value !== value)
				} else {
					this.form.reportIds.push(item.value)
				}
			},
			hasReport(item) {
				return  this.form.reportIds.includes(item.value)
			},
			// 媒体文件变动后
			changeFile(file) {
				this.form.filelist = file
			},
			// 退出之前询问，前提是已经对数据进行写入
			jumpBackBefore() {
				if (this.form.reportIds.length || this.form.filelist.length || this.form.description) {
					this.quitVisible = true
				} else {
					this.quitAction()
				}
			},
			// 退出举报
			quitAction() {
				uni.navigateBack({ delta: 1 })
				this.quitVisible = false
			},
			// 提交举报信息
			submitReport() {
				let { reportIds, filelist, description } = this.form
				if (!reportIds.length) {
					return this.$api.msg(this.lang_common.typeTips)
				} else if (!filelist.length) {
					return this.$api.msg(this.lang_common.imageTips)
				}
				let contentIds = reportIds.join(',')
				let mediaUrls = filelist.map(item => item.fileUrl).join(',')
				if (this.isClick) return;
				this.isClick = true
				actionReport({ toUserId: this.userId, contentIds, mediaUrls, remark: description }).then(() => {
					let timer = setTimeout(() => {
						this.isClick = false
						this.jumpBack()
					}, 1000)
				}).catch(() => { this.isClick = false })
			}
		}
	}
</script>

<style scoped lang="scss">
	.file-type {
		&-container {
			padding: 48rpx 36rpx calc(env(safe-area-inset-bottom) + 48rpx);
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			background-color: #FFFFFF;
		}
		
		&-item {
			width: 200rpx;
			height: 72rpx;
			border-radius: 8rpx;
			background-color: rgba(245, 245, 245, 1);
		}
	}
	
	.file {
		&-box {
			position: relative;
			width: 200rpx;
			height: 200rpx;
			background-color: #f9f9f9;
			border-radius: 34rpx;
		}
		
		&-close {
			position: absolute;
			top: 0;
			right: 0;
		}
	}
	
	.relation {
		&-avatar {
			width: 76rpx;
			height: 76rpx;
			border-radius: 14rpx;
			background-color: #f9f9f9;
		}
		&-container {
			padding: 16rpx 22rpx 18rpx;
			border-radius: 16rpx;
			background-color: #f9f9f9;
		}
	}
	
	.description {
		&-container {
			padding: 26rpx 22rpx;
			border-radius: 10rpx;
			background-color: #F7F8F9;
		}
	}
	
	.footer {
		border-top: 1rpx solid #aaaaaa;
	}
</style>
